<template>
  <div class="box">
    <div class="nav">
      <div class="nav-item" 
        v-for="(item,index) in items" 
        :key="index" 
        @click="changeActive(index)"
        :style="active == index ? 'color:#0f4494;font-weight:bold' : ''"
      >
        {{item.name}}
        <div class="line" :class="{'active':index == active}"></div>
      </div>
    </div>
    <div class="content" v-loading="loading" v-if="count.result.records">
      <div class="text" v-for="(item,index) in count.result.records.slice(0,8)" :key="index">
        <div style="display:flex;align-items: center;">
          <div class="triangle-right"></div>
          <p class="title">{{item.title}}</p>
        </div>
        <div class="title" style="margin-right: 10px;" :style=" item.pubTime.slice(5,10) == count.result.records[0].pubTime.slice(5,10) ? 'color:#C90A0A' : ''">{{'[' + item.pubTime.slice(5,10) + ']'}}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { useApi } from '../../utils/api'
  const props = defineProps({
    breed: {
      type: [String, Number], // 指定类型
      // required: true, // 是否必须
      default: "1476451881127518210", // 默认值（可选）
    },
  });
  const items = [
    { name: '价格汇总', id: '1473499670560550914' },
    { name: '供需报告', id: '1473499931869884418' },
    { name: '机构报告', id: '1473500057787084802' },
    { name: '库存利润', id: '1473499879013265410' },
    { name: '海关统计', id: '1473499760385765377' }
  ];
  const loading = ref(false);
  const active = ref(0);
  const id = ref(items[0].id);
  const breed = props.breed;
  const count = ref({
    result: {
      records: [] // 初始化为空数组
    }
  });

  watch(id, () => {
    fetchReportList();
  }, { immediate: true });//初始化也执行

  function changeActive(index) {
    active.value = index;
    id.value = items[index].id;
    loading.value = true;
  }

  async function fetchReportList() {
    const { data } = await useApi(
      `/api/web/infoCategory/getReportListByIds/${breed}/${id.value}`,
      { params: { current: 1 } }
    );
    // console.log('fecth方式请求的数据',data);
    count.value = data.value;
    loading.value = false;
  }
  // 目前接口请求时间在2.52s左右，需要添加加载动画
</script>

<style lang="scss" scoped>
  .box{
    height: 310px;
    background-color: #fafafa;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .nav{
      width: 100%;
      height: 32px;
      background-color: #f0f6fa;
      color: #222;
      display: flex;
      .nav-item{
        width: 20%;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        .line{
          width: 56px;
          height: 2px;
          background-color: #f0f6fa;
        }
        .active{
          background-color: #0f4494;
        }
      }
    }
    .content{
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      .text{
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .triangle-right {
          margin: 0 5px;
          width: 0;
          height: 0;
          border-top: 4px solid transparent;    /* 高度的一半（8px / 2） */
          border-bottom: 4px solid transparent; /* 高度的一半（8px / 2） */
          border-left: 6px solid #CCC;         /* 宽度（6px），颜色可自定义 */
        }
        .title{
          color: #222;
          font-size: 14px;
          line-height: 21px;
          white-space: nowrap;
          max-width: 330px;
          text-overflow: ellipsis;
          overflow: hidden;
          cursor: pointer;
        }
      }
    }
  }
</style>